<template>
    <el-container style="border: 1px solid #eee;" class="container1">

        <el-aside width="auto" ref="menu" class="el-aside">
<!--             
            开启鼠标移动到左侧菜单栏时，会打开菜单栏，离开则缩小
            @mouseenter.native="collapseOpen"
            @mouseleave.native="collapseClose" 
-->

            <!-- 左边菜单栏 -->
            <el-menu :default-openeds="openItem" 
            :collapse="isCollapse"
            style="height:100%;"
            router>
            
              <img src="@/assets/logo.png" style="width:100%; height:60px;"/>
              <el-submenu  v-for="(item,index) in $router.options.routes.slice(2,-1)" :key='index' :index="index+'' "  >
                
                <template slot="title">
                    <!-- 左边小图标 -->
                    <i :class="item.meta.icon"></i>
                    <span style="font-weight:bold;font-size:16px; ">{{item.name}}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item v-for="(item2,index2) in item.children" :key='index2' :index="item2.path"  
                                  :class="$route.path==item2.path?('is-active'):''" >
                      <template slot="title"> 
                          <!-- 左边小图标 -->
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i :class="item2.meta.icon"></i>
                          <span style="font-size:12px; ">{{item2.name}}</span>
                      </template>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
        </el-aside>
    
        <el-container>

          <!-- 这里是header -->
          <el-header style="font-size:0; width:100%;">
            <!-- 左侧按钮收缩左侧菜单作用 -->
            <hamburger class="hamburger-container" @toggleClick="collapseStatus"/>

            <div style=" position: fixed; right: 25px;top: 0px;">
              <el-dropdown>
                  <!-- 用户头像 -->
                  <img :src="userInfo.avatar" style="vertical-align:middle; margin-right: 15px; height:45px; width:45px; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;"/>
                  <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>详情信息</el-dropdown-item>
                  <el-dropdown-item @click.native="logoutBtn">注销</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
              <span style=" font-weight:bold; font-size:16px;">{{userInfo.name}}</span>
            </div>
          </el-header>

          <el-main>
            <div id="main_body" >
              <!--  将身体部分放这里  -->
              <router-view></router-view>
            </div>
          </el-main>
        </el-container>
    </el-container>
</template>

<script>
  import Cookies from 'js-cookie';
  import {logout,getMenu} from '@/api/login';
  import {resetRouter,addRouter} from '@/router/index';
  import menu from '@/api/acl/menu';
  import Hamburger from '@/components/Hamburger';
  
  export default {
    // 导入header
    components: {
      Hamburger
    },
    data() {
      return {
        //菜单栏展开的index
        openItem:[0],
        //用户信息
        userInfo:{},
        num:5,
        timer:'',
        collapseBtnClick: false,
        // 没有折叠
        isCollapse: false,
      }
    },
    methods:{
      collapseStatus() {
        this.collapseBtnClick = this.isCollapse;
        this.isCollapse = !this.isCollapse;
      },
      // collapseOpen() {
      //   if (this.collapseBtnClick) return;
      //       this.isCollapse = false;
      // },
      // collapseClose() {
      //   if (this.collapseBtnClick) return;
      //   this.isCollapse = true;
      // },


      //获取用户信息
      getUserInfo(){
        let info = Cookies.get("guli_user");
        if(info){
          this.userInfo = JSON.parse(info);
          console.log("userInfo (Main) == ",this.userInfo)
          return true;
        }else{
          return false;
        }
        
      },
      //五次获取用户信息，因为异步可能先获取，后得到值
      get(){
        this.timer = setInterval(()=>{
          //定时执行五次
          if(this.num>0){
            //每次自减一
            this.num--;
            //如果获取成功，则停止循环
            if(this.getUserInfo()){
              console.log("userInfo (Main) == 数据已获取")
              clearInterval(this.timer);
            }
          }else{
            console.log("userInfo (Main) == 数据没有获取到")
            clearInterval(this.timer);
          }
        },500)
      },
      //注销
      logoutBtn(){

        this.$confirm('是否退出登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          logout().then(response=>{
            //清空cookie值
            Cookies.set('guli_token','',{domain: 'localhost'})
            Cookies.set('guli_user','',{domain: 'localhost'})
            //回到首页面
            window.location.href = "/login";
          })
        }).catch(() => {});
      },
      // 展开左侧选中的菜单
      show(){
        //左边菜单栏默认打开选中的那个
        //获取router.js中路由且从下标2开始遍历
        let routes = this.$router.options.routes.slice(2,-1);
        console.log("routes --- ",routes);
        if(routes!=null&&routes.length>0){
          // 不为空开始遍历
          routes.forEach((item,index) => {
            let children = item.children;
            if(children!=null&&children.length>0){
              // 子菜单不为空则遍历
              children.forEach(item2=>{
                  //如果路由相等，说明此刻正访问该菜单
                  if(this.$route.path==item2.path){
                    // 设置展开的下标
                    this.openItem = [index+'']
                    console.log("展开的menu = ",this.openItem)
                  }
              });
            }
          });
        }
      },

      // --------------------- 可以不用理会 --------------------- 
      //添加路由到数据库  
      addRoutes(){
        // 得到router.js中的动态路由
        let routes = addRouter();
        let list = [];
        // 将router.js中的动态路由封装成数据库表的格式
        this.initRouterMethod(list,routes);
        console.log("routes  == ",list)
        // 添加到数据库里
        menu.addRoutes(list).then(res=>{
          this.$message({
            type:'success',
            message:'路由上传成功！'
          })
        })
      },
      // 将router.js中的动态路由封装成数据库表的格式
      initRouterMethod(list,routes){
        for(let i = 0;i< routes.length;i++){
          // 最后一个路由不添加，因为是404 所有用户共有的
          if(i==routes.length-1){
            break;
          }
          // 将router.js 的路由添加到entity实体类（根据后台的permission格式）
          let entity={};
          //meta 包含icon和title
          let meta = routes[i].meta;
          if(meta!=null){
            entity.name = meta.title;
            entity.icon = meta.icon;
          }
          // 路由地址
          entity.path = routes[i].path;
          // 重定向地址
          entity.redirect = routes[i].redirect;
          // 可以不设置
          entity.component = 'Main'
          // 子菜单权限
          entity.children = [];
          // 将entity实体类添加到list中
          list.push(entity);
          // 如果router.js中的某个菜单权限含有子菜单的话
          // 同样将router.js路由封装到entity.children中
          if(routes[i].children){
            this.initRouterMethod(entity.children,routes[i].children);
          }
        }
      },
    },
    created(){
      this.show();
      this.get();
    },
  }
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }


  .container1 {
    height:100%;
    width:100%;
    position:fixed;
  }


</style>

